<!-- 籍贯控件 -->
<template>
  <a-select
    :placeholder="getProps.placeholder"
    :disabled="disabled"
    allow-search
    allow-clear
    @change="stateChange"
    ref="stateRef"
    v-model="currStateId"
  >
    <a-option
      v-for="item in selectedStateList"
      :key="item.id"
      :value="item.id"
      >{{ item.cname }}</a-option
    >
  </a-select>
  <a-select
    :placeholder="getProps.placeholder"
    :disabled="disabled"
    allow-search
    allow-clear
    @change="cityChange"
    ref="cityRef"
    v-model="currCityId"
  >
    <a-option
      v-for="item in selectedCityList"
      :key="item.id"
      :value="item.id"
      >{{ item.cname }}</a-option
    >
  </a-select>

  <a-select
    :placeholder="getProps.placeholder"
    :disabled="disabled"
    allow-search
    allow-clear
    ref="regionRef"
    @change="regionChange"
    v-if="selectedRegionsList.length > 0"
    v-model="currRegionId"
  >
    <a-option
      v-for="item in selectedRegionsList"
      :key="item.id"
      :value="item.id"
      >{{ item.cname }}</a-option
    >
  </a-select>
</template>

<script lang="ts" setup>
import statesJson from '@/assets/json/states.json';
import citiesJson from '@/assets/json/cities.json';
import regionsJson from '@/assets/json/regions.json';

const props = withDefaults(
  defineProps<{
    props: { [propName: string]: any };
    name?: string;
    required?: boolean;
    oneValue: any;
    disabled?: boolean;
    regex?: {
      [name: string]: {
        role: any;
        name: any;
      };
    };
  }>(),
  {}
);

const states = statesJson.RECORDS; // 储存所有省份地区json
const cities = citiesJson.RECORDS; // 储存所有城市json
const regions = regionsJson.RECORDS; // 储存所有的区县json

let selectedStateList = ref<any>([]); // 具体的市级列表
let selectedCityList = ref<any>([]); // 具体的市级列表
let selectedRegionsList = ref<any>([]); // 具体的区县级列表

/* 储存三个下拉选择框的ref */
let stateRef = ref();
let cityRef = ref();
let regionRef = ref();

/* 储存三个下拉框的选中值的id */
let currStateId = ref('');
let currCityId = ref('');
let currRegionId = ref('');

// 数据格式
let data: any = ref({
  state: '',
  city: '',
  region: ''
});

const emit = defineEmits(['update:oneValue']);
const modelValue = computed({
  get: () => {
    return props.oneValue;
  },
  set: (val) => {
    emit('update:oneValue', JSON.stringify(data.value));
  }
});

onMounted(() => {
  // 如果modalValue是有数据的，即编辑情况下
  if (modelValue.value !== undefined && modelValue.value[0] !== '') {
    data.value = JSON.parse(modelValue.value);
    states.filter((item: any) => {
      // 44是中国的id
      if (item.country_id === '44') selectedStateList.value.push(item);
      if (item.cname === data.value.state) currStateId.value = item.id;
    });
    cities.filter((item: any) => {
      if (item.cname === data.value.city) currCityId.value = item.id;
      if (item.state_id === currStateId.value)
        selectedCityList.value.push(item);
    });
    regions.filter((item: any) => {
      if (item.cname === data.value.region) currRegionId.value = item.id;
      if (item.city_id === currCityId.value)
        selectedRegionsList.value.push(item);
    });
  }
  // 新增无数据的情况下
  else {
    states.filter((item: any) => {
      // 44是中国的id
      if (item.country_id === '44') selectedStateList.value.push(item);
    });
  }
});

//复制一份props
const getProps = computed(() => {
  return props.props;
});

// 选择省级下拉框时
const stateChange = (id: string) => {
  selectedCityList.value = [];
  selectedRegionsList.value = [];
  data.value.city = '';
  data.value.region = '';
  currCityId.value = '';
  currRegionId.value = '';
  states.find((item: any) => {
    if (item.id === id) data.value.state = item.cname;
  });
  cities.filter((item: any) => {
    if (item.state_id === id) {
      selectedCityList.value.push(item);
    }
  });
  modelValue.value = data.value;
};

// 选择市级下拉框时
const cityChange = (id: string) => {
  selectedRegionsList.value = [];
  data.value.region = '';
  currRegionId.value = '';
  cities.find((item: any) => {
    if (item.id === id) data.value.city = item.cname;
  });
  regions.filter((item: any) => {
    if (item.city_id === id) selectedRegionsList.value.push(item);
  });
  modelValue.value = data.value;
};

// 选择市级下拉框时
const regionChange = (id: string) => {
  regions.find((item: any) => {
    if (item.id === id) data.value.region = item.cname;
  });
  modelValue.value = data.value;
};
</script>

<style scoped lang="less"></style>
